<template>
	<div class="adminMain" v-loading="load.load">
		<el-row class="tableBtnTop">
			<el-select v-model="field.id" placeholder="请选择" class="filter">
				<el-option v-for="(item, index) in field.list" :label="item.label" :key="item.key" :value="item.value"></el-option>
			</el-select>
			<div class="search">
				<el-input placeholder="请搜索" v-model="keyword" @keyup.enter.native="page = 1;getList()">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<el-button class="f1" @click="getList">立即搜索</el-button>
			<el-button class="f1" @click="detailFunction('show', -1)" style="margin-left:15px;">添加管理员</el-button>
		</el-row>
		<el-table :data="tableData" border>
			<el-table-column prop="id" label="ID" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="username" label="账号" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="" label="最后登录时间" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					{{ scope.row.login_time || "-" }}
				</template>
			</el-table-column>
			<el-table-column prop="" label="最后登录IP" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					{{ scope.row.login_ip || "-" }}
				</template>
			</el-table-column>
            <el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="tableBtn">
						<a @click="detailFunction('show', scope.$index)">编辑</a>
						<el-popconfirm title="确定删除吗？" @confirm="deleteItem(scope.$index)">
						    <a slot="reference" style="color:#999;">删除</a>
						</el-popconfirm>
                    </div>
                </template>
            </el-table-column>
		</el-table>
		<div class="paginationBlock">
			<el-pagination layout="prev, pager, next, sizes, total" @size-change="getList" @current-change="getList" :total="total" :current-page.sync="page" :page-size.sync="limit" ></el-pagination>
		</div>
		
		<!-- 详情弹窗 -->
		<el-dialog title="提示" :visible.sync="detail.show" width="550px" :close-on-click-modal="false">
			<el-form label-position="top" v-if="detail.data">
				<el-form-item label="ID" v-if="detail.data.id">{{ detail.data.id }}</el-form-item>
				<el-form-item label="头像" required v-if="!detail.data.id">
					<el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response)" accept="image/png,image/jpeg">
						<img v-if="detail.data.avatar" :src="detail.data.avatar" onerror="javascript:this.src = '/static/img/a3o.png'" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="账号" required v-if="!detail.data.id">
					<el-input v-model="detail.data.username"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" required>
					<el-input v-model="detail.data.password"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detail.show = false;">取 消</el-button>
				<el-button type="primary" @click="detailFunction('post')" :loading="detail.load.load">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 是否处于加载中
				load: { load: false },
				
				// 表格数据
				tableData: [],
				
				// 当前页数
				page: this.$route.query.page ? parseInt(this.$route.query.page) : 1,
				
				// 每页条数
				limit: this.$route.query.limit ? parseInt(this.$route.query.limit) : this.app.limit,
				
				// 总数
				total: this.$route.query.total ? parseInt(this.$route.query.total) : 0,
				
				// 可选择的搜索类型列表
				field: {
					list: [],
					id: this.$route.query.field || "",
				},
				
				// 搜索关键词
				keyword: this.$route.query.keyword || "",
				
				// 详情
				detail: {
					show: false,
					load: {load:false},
					data: null
				},
				
			};
		},
		methods: {
			
			// 上传文件
			fileUpload(res){
				let _this = this;
				_this.app.uploadFile({ file: res.file, type: "admin", load: _this.detail.load }).then((res) => {
					_this.detail.data.avatar = res.data.url;
				});
			},
			
			// 详情弹窗
			detailFunction(type, index){
				let _this = this;
				if(type == "show"){
					_this.detail.data = {
						id: "",
						password: "",
						username: "",
						avatar: "",
					}
					if(index === -1){
						delete _this.detail.data.id;
					}else{
						delete _this.detail.data.username;
						delete _this.detail.data.avatar;
						_this.detail.data.id = _this.tableData[index].id;
						_this.detail.data.password = "";
					}
					_this.detail.show = true;
				}else if(type == "post"){
					// 向后端请求
					_this.app.ajax({
						url: _this.detail.data.id ? "/admin/user/edit" : "/admin/user/add",
						method: "POST",
						load: _this.detail.load,
						data: _this.detail.data,
						success(res){
							_this.detail.show = false;
							_this.getList();
							_this.$notify({title: "提示",message: res.msg, type: "success"});
						}
					})
				}
			},
			
			// 删除管理员
			deleteItem(index){
				let _this = this;
				_this.app.ajax({
					url: "/admin/user/del",
					method: "POST",
					load: _this.load,
					data: { id: _this.tableData[index].id },
					success(res){
						_this.getList();
						_this.$notify({title: "提示",message: res.msg, type: "success"});
					}
				})
			},
			
			// 获取列表
			getList(){
				let _this = this;
				_this.app.ajax({
					url: "/admin/user/index",
					method: "POST",
					data: {
						keyword: _this.keyword,
						field: _this.field.id,
						limit: _this.limit,
						page: _this.page,
					},
					load: _this.load,
					changeUrl: true,
					success(res){
						_this.total = res.data.total;
						_this.tableData = res.data.list;
						_this.field.list = res.data.fields;
						_this.field.id = _this.field.id || res.data.fields[0].value;
					}
				})
			},
			
		},
		mounted(){
			this.getList();
		},
	};
</script>

<style lang="scss" scoped>
	.adminMain{
		.avatar-uploader {
			>>>.el-upload {
				$width: 40px;
				display: block;
				width: $width;
				height: $width;
				.avatar-uploader-icon {
					font-size: 18px;
					border: 1px dashed #d9d9d9;
					border-radius: 4px;
					color: #8c939d;
					width: $width;
					height: $width;
					line-height: $width - 2px;
					text-align: center;
					display: block;
				}
				.avatar {
					width: $width;
					height: $width;
					display: block;
					border-radius: 4px;
				}
			}
		}
	}
</style>